<!-- 新鲜好物 -->
<template>
    <div class="home-new" ref="goodslist">
      <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
        <template #right><XtxMore path="/" /></template>
        <!-- 面板内容 -->
        <ul class="goods-list">
          <li v-for="item in goods" :key="item.id">
            <RouterLink :to="`/product/${item.id}`">
              <!-- <img :src="item.picture" alt=""> -->
              <img src="" alt="" v-lazy="item.picture">
              <p class="name ellipsis">{{item.name}}</p>
              <p class="price">&yen;{{item.price}}</p>
            </RouterLink>
          </li>
        </ul>
      </HomePanel>
    </div>
  </template>
  <script>
  import HomePanel from './HomePanel.vue'
  import { getxxhw } from '@/utils/api/homeapi'
  import { lazyload } from '@/utils/constfun'
  export default {
    name: 'HomeNew',
    components: { HomePanel },
    data(){
        return{
            goods:[]
        }
    },
    mounted(){
        // this.getxxhwlist()
        // 导入原生api 来观察我们的dom元素
        lazyload(this.$refs.goodslist,this.getxxhwlist)
    },
    methods:{
        async getxxhwlist(){
            let res=await getxxhw()
            this.goods=res.result
        }
    }
  }
  </script>
  <style scoped lang="scss">
  @import '@/assets/css/variables.scss';
  @import '@/assets/css/mixin.scss';
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 406px;
    li {
      width: 306px;
      height: 406px;
      background: #f0f9f4;
      @include hoverShadow();
      img {
        width: 306px;
        height: 306px;
      }
      p {
        font-size: 22px;
        padding: 12px 30px 0 30px;
        text-align: center;
      }
      .price {
        color: $priceColor;
      }
    }
  }
  </style>